<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义进度条样式</title>
    <style>
        /* 进度条容器样式 */
        .progress-container {
            width: 100%;
            background-color: #e0e0e0; /* 进度条背景颜色 */
            border-radius: 5px; /* 进度条圆角 */
        }

        /* 进度条样式 */
        .progress-bar {
            position: absolute; /* 设置绝对定位 */
            top: 450px;
            height: 30px; /* 进度条高度 */
            width: 0%; /* 初始宽度为0% */
            background-color: #4CAF50; /* 进度条填充颜色 */
            border-radius: 5px; /* 进度条圆角 */
            text-align: center; /* 文字居中 */
            line-height: 30px; /* 行高与进度条高度一致，实现垂直居中 */
            color: white; /* 文字颜色 */
            transition: width 0.5s ease-in-out; /* 宽度变化时的过渡效果 */
        }
    </style>
</head>
<body>
    <div class="progress-container">
        <div class="progress-bar" id="progressBar">0%</div>
    </div>
    <script>
        function updateProgress() {
            var progressBar = document.getElementById('progressBar');
            var width = parseInt(progressBar.style.width) || 0;
            width += 1; // 假设每次增加1%
            progressBar.style.width = width + '%';
            progressBar.textContent = width + '%';
            if (width >= 100) {
                clearInterval(interval);
            }
        }
        var interval = setInterval(updateProgress, 100); // 每100毫秒更新一次进度
    </script>
</body>
</html>
